من هذا الكود ازل خيار الجودات واجعل جودت البث كما هي التي تم استلامها من الخادم،  وايضا اجعل الكود اسرع بكثير  في عملة جلب الرابط وشتغيله بحيث عند استلام
import SwiftUI
import UIKit
import IJKMediaFramework
import Network

// Channel structure with URL
struct Channel: Identifiable, Codable {
    let id: String
    let name: String
    let displayName: String
    let group: String
    let logo: String
}

// Channel Link Manager with optimized fetching
class ChannelLinkManager: ObservableObject {
    @Published var channels: [Channel]
    
    init(channels: [Channel]) {
        self.channels = channels
    }
    
    func fetchStreamUrl(for channel: Channel) async -> String? {
        if channel.group == "القنوات الرياضية" && ["SSC 1 HD", "SSC 2 HD"].contains(channel.name) {
            switch channel.name {
            case "SSC 1 HD": return "https://stream.sainaertebat.com/hls2/ssc1.m3u8"
            case "SSC 2 HD": return "https://stream.sainaertebat.com/hls2/ssc2.m3u8"
            default: return nil
            }
        } else {
            let url = generateChannelUrl(channelId: channel.id)
            return await fetchStreamUrlFromServer(url: url)
        }
    }
    
    private func fetchStreamUrlFromServer(url: String) async -> String? {
        let requestUrl = URL(string: "https://vavoo.to/vto-cluster/mediahubmx-resolve.json")!
        var request = URLRequest(url: requestUrl, timeoutInterval: 10.0)
        request.httpMethod = "POST"
        request.setValue("vavoo.to", forHTTPHeaderField: "Host")
        request.setValue("application/json; charset=utf-8", forHTTPHeaderField: "Content-Type")
        request.setValue("Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1", forHTTPHeaderField: "User-Agent")
        request.setValue("eyJkYXRhIjoie1wiYXBwXCI6e319Iiwic2lnbmF0dXJlIjoiIn0=", forHTTPHeaderField: "MediaHubMX-Signature")
        
        let jsonData: [String: Any] = ["language": "AA", "region": "AA", "url": url, "clientVersion": "3.0.2"]
        
        do {
            request.httpBody = try JSONSerialization.data(withJSONObject: jsonData)
            let configuration = URLSessionConfiguration.default
            configuration.requestCachePolicy = .reloadIgnoringLocalCacheData
            configuration.urlCache = nil
            let session = URLSession(configuration: configuration)
            let (data, response) = try await session.data(for: request)
            
            guard let httpResponse = response as? HTTPURLResponse, (200...299).contains(httpResponse.statusCode) else {
                print("Invalid response for \(url): \(response)")
                return nil
            }
            
            if let jsonArray = try JSONSerialization.jsonObject(with: data) as? [[String: String]],
               let streamUrl = jsonArray.first?["url"] {
                return streamUrl
            }
        } catch {
            print("Error fetching stream URL for \(url): \(error)")
        }
        return nil
    }
    
    private func generateRandomValue() -> String {
        let characters = "abcdef0123456789"
        return String((0..<12).map { _ in characters.randomElement()! })
    }
    
    private func generateChannelUrl(channelId: String) -> String {
        let randomValue = generateRandomValue()
        return "https://vavoo.to/vto-tv/play/\(channelId)\(randomValue)"
    }
}

// Welcome Screen
struct WelcomeScreen: View {
    @State private var animate = false
    @Binding var showWelcome: Bool
    
    var body: some View {
        ZStack {
            LinearGradient(
                gradient: Gradient(colors: [Color(hex: "1e3c72"), Color(hex: "ff6f61"), Color(hex: "00b4db")]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .edgesIgnoringSafeArea(.all)
            
            VStack(spacing: 30) {
                Image("loko")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 250, height: 250)
                    .clipShape(RoundedRectangle(cornerRadius: 40))
                    .shadow(color: .black.opacity(0.7), radius: 30, x: 0, y: 15)
                    .scaleEffect(animate ? 1.0 : 0.5)
                    .opacity(animate ? 1.0 : 0.0)
                    .animation(.spring(response: 0.8, dampingFraction: 0.6, blendDuration: 0.3).delay(0.2), value: animate)
                
                Text("iDEB Sports 4K")
                    .font(.custom("Questv1-Bold", size: 52))
                    .foregroundColor(.white)
                    .shadow(color: .black.opacity(0.6), radius: 8, x: 0, y: 4)
                    .opacity(animate ? 1.0 : 0.0)
                    .offset(y: animate ? 0 : 70)
                    .animation(.interpolatingSpring(stiffness: 100, damping: 15).delay(0.5), value: animate)
                
                Text("لاتفوت لحظة")
                    .font(.custom("Questv1-Bold", size: 28))
                    .foregroundColor(.white.opacity(0.9))
                    .shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 2)
                    .opacity(animate ? 1.0 : 0.0)
                    .offset(y: animate ? 0 : 50)
                    .animation(.interpolatingSpring(stiffness: 80, damping: 12).delay(0.8), value: animate)
            }
        }
        .onAppear {
            withAnimation {
                animate = true
            }
            DispatchQueue.main.asyncAfter(deadline: .now() + 4.5) {
                withAnimation(.easeInOut(duration: 1.2)) {
                    showWelcome = false
                }
            }
        }
    }
}
class PlayerViewModel: ObservableObject {
    @Published var player: IJKFFMoviePlayerController?
    @Published var isLoading = true
    @Published var isPlaying = false
    @Published var isFullscreen = false
    @Published var isLocked = false
    @Published var playbackSpeed: Float = 1.0
    @Published var qualityOptions: [String] = ["240p", "360p", "480p", "720p", "1080p"]
    @Published var selectedQuality: String = "720p"
    @Published var networkStatus: NWPath.Status = .satisfied
    @Published var errorMessage: String?
    @Published var showControls = false
    private let networkMonitor = NWPathMonitor()
    private var retryCount = 0
    private let maxRetries = 3
    private var controlsTimer: Timer?
    private weak var linkManager: ChannelLinkManager?
    private var currentChannel: Channel?
    private var currentURL: URL?
    
    init() {
        startNetworkMonitoring()
    }
    
    func load(channel: Channel, linkManager: ChannelLinkManager) async {
        self.linkManager = linkManager
        self.currentChannel = channel
        
        // تحديث الحالة الأولية في الخيط الرئيسي
        DispatchQueue.main.async { [weak self] in
            self?.isLoading = true
            self?.isPlaying = false
            self?.retryCount = 0
            self?.errorMessage = nil
            self?.showControls = true
            self?.cleanupPlayer()
        }
        
        // جلب الرابط في خيط خلفي
        guard let streamUrlString = await linkManager.fetchStreamUrl(for: channel),
              let url = URL(string: streamUrlString) else {
            DispatchQueue.main.async { [weak self] in
                self?.errorMessage = "فشل جلب رابط البث"
                self?.isLoading = false
            }
            return
        }
        
        self.currentURL = url
        
        // تهيئة المشغل في الخيط الرئيسي
        DispatchQueue.main.async { [weak self] in
            self?.initializePlayer(url: url)
        }
    }
    
    private func initializePlayer(url: URL) {
        guard let options = IJKFFOptions.byDefault() else {
            DispatchQueue.main.async { [weak self] in
                self?.errorMessage = "فشل تحميل الإعدادات"
                self?.isLoading = false
            }
            return
        }
        
        options.setOptionIntValue(1, forKey: "reconnect", of: kIJKFFOptionCategoryPlayer)
        options.setOptionIntValue(60, forKey: "timeout", of: kIJKFFOptionCategoryPlayer)
        options.setOptionIntValue(1, forKey: "mediacodec-all-videos", of: kIJKFFOptionCategoryPlayer)
        options.setOptionIntValue(0, forKey: "dns_cache_clear", of: kIJKFFOptionCategoryPlayer)
        options.setOptionIntValue(1, forKey: "http-detect-range-support", of: kIJKFFOptionCategoryFormat)
        options.setOptionValue("nobuffer", forKey: "fflags", of: kIJKFFOptionCategoryFormat)
        options.setOptionValue("Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1", forKey: "user-agent", of: kIJKFFOptionCategoryFormat)
        applyQualityOptions(options: options, quality: selectedQuality)
        
        player = IJKFFMoviePlayerController(contentURL: url, with: options)
        player?.shouldAutoplay = true
        player?.scalingMode = .aspectFit
        
        player?.prepareToPlay()
        setupNotifications()
        startPlayback()
    }
    
    private func setupNotifications() {
        NotificationCenter.default.addObserver(forName: .IJKMPMoviePlayerLoadStateDidChange, object: player, queue: .main) { [weak self] _ in
            guard let self = self, let player = self.player else { return }
            if player.loadState.contains(.playable) {
                self.isLoading = false
                self.isPlaying = true
                self.errorMessage = nil
            } else if player.loadState.contains(.stalled) {
                self.handleStalledState()
            }
        }
        
        NotificationCenter.default.addObserver(forName: .IJKMPMoviePlayerPlaybackStateDidChange, object: player, queue: .main) { [weak self] _ in
            guard let self = self, let player = self.player else { return }
            self.isPlaying = player.playbackState == .playing
            self.isLoading = player.playbackState == .stopped && !self.isPlaying
        }
        
        NotificationCenter.default.addObserver(forName: .IJKMPMoviePlayerPlaybackDidFinish, object: player, queue: .main) { [weak self] notification in
            guard let self = self else { return }
            if let reason = notification.userInfo?[IJKMPMoviePlayerPlaybackDidFinishReasonUserInfoKey] as? Int,
               reason == IJKMPMovieFinishReason.playbackError.rawValue {
                self.handlePlaybackError()
            }
        }
    }
    
    private func handleStalledState() {
        DispatchQueue.main.async { [weak self] in
            guard let self = self else { return }
            self.errorMessage = "جاري إعادة الاتصال..."
            self.retryCount += 1
            if self.retryCount <= self.maxRetries {
                self.player?.prepareToPlay()
            } else {
                self.errorMessage = "فشل الاتصال بعد عدة محاولات"
                self.isLoading = false
            }
        }
    }
    
    private func handlePlaybackError() {
        DispatchQueue.main.async { [weak self] in
            guard let self = self, let channel = self.currentChannel, let linkManager = self.linkManager else { return }
            self.errorMessage = "خطأ في البث، جاري المحاولة مجددًا..."
            self.retryCount += 1
            if self.retryCount <= self.maxRetries {
                self.cleanupPlayer()
                Task {
                    await self.load(channel: channel, linkManager: linkManager)
                }
            } else {
                self.errorMessage = "فشل تشغيل البث بعد المحاولات"
                self.isLoading = false
            }
        }
    }
    
    private func startPlayback() {
        player?.play()
        player?.playbackRate = playbackSpeed
        resetControlsTimer()
    }
    
    private func startNetworkMonitoring() {
        networkMonitor.pathUpdateHandler = { [weak self] path in
            DispatchQueue.main.async {
                self?.networkStatus = path.status
                if path.status == .unsatisfied && self?.isPlaying == true {
                    self?.errorMessage = "فقدان الاتصال، جاري المحاولة..."
                    self?.player?.prepareToPlay()
                }
            }
        }
        networkMonitor.start(queue: DispatchQueue.global(qos: .userInitiated))
    }
    
    func togglePlayPause() {
        DispatchQueue.main.async { [weak self] in
            guard let self = self else { return }
            if self.isPlaying {
                self.player?.pause()
            } else {
                self.player?.play()
            }
            self.resetControlsTimer()
        }
    }
    
    func toggleFullscreen() {
        DispatchQueue.main.async { [weak self] in
            self?.isFullscreen.toggle()
            self?.resetControlsTimer()
        }
    }
    
    func toggleLock() {
        DispatchQueue.main.async { [weak self] in
            self?.isLocked.toggle()
            self?.showControls = true
            self?.resetControlsTimer()
        }
    }
    
    func setPlaybackSpeed(_ speed: Float) {
        DispatchQueue.main.async { [weak self] in
            self?.playbackSpeed = speed
            self?.player?.playbackRate = speed
            self?.resetControlsTimer()
        }
    }
    
    func setQuality(_ quality: String) {
        DispatchQueue.main.async { [weak self] in
            guard let self = self, let channel = self.currentChannel, let linkManager = self.linkManager else { return }
            self.selectedQuality = quality
            self.cleanupPlayer()
            Task {
                await self.load(channel: channel, linkManager: linkManager)
            }
        }
    }
    
    private func applyQualityOptions(options: IJKFFOptions, quality: String) {
        let maxBitrate: Int
        switch quality {
        case "240p": maxBitrate = 300_000
        case "360p": maxBitrate = 600_000
        case "480p": maxBitrate = 1_000_000
        case "720p": maxBitrate = 2_500_000
        case "1080p": maxBitrate = 5_000_000
        default: maxBitrate = 2_500_000
        }
        options.setOptionIntValue(Int64(maxBitrate), forKey: "max-video-bitrate", of: kIJKFFOptionCategoryPlayer)
    }
    
    func pause() {
        DispatchQueue.main.async { [weak self] in
            self?.player?.pause()
            self?.isPlaying = false
            self?.controlsTimer?.invalidate()
        }
    }
    
    private func cleanupPlayer() {
        player?.stop()
        player?.shutdown()
        player = nil
        NotificationCenter.default.removeObserver(self)
    }
    
    func showControlsTemporarily() {
        DispatchQueue.main.async { [weak self] in
            self?.showControls = true
            self?.resetControlsTimer()
        }
    }
    
    private func resetControlsTimer() {
        controlsTimer?.invalidate()
        controlsTimer = Timer.scheduledTimer(withTimeInterval: 5.0, repeats: false) { [weak self] _ in
            DispatchQueue.main.async {
                if self?.isLocked == false {
                    self?.showControls = false
                }
            }
        }
    }
    
    deinit {
        cleanupPlayer()
        networkMonitor.cancel()
        controlsTimer?.invalidate()
    }
}
// Player View with IJKMediaPlayer
struct PlayerView: UIViewRepresentable {
    @ObservedObject var viewModel: PlayerViewModel
    
    func makeUIView(context: Context) -> UIView {
        guard let player = viewModel.player else {
            return UIView()
        }
        player.scalingMode = .aspectFit
        player.shouldAutoplay = true
        return player.view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        if let player = viewModel.player, uiView != player.view {
            uiView.subviews.forEach { $0.removeFromSuperview() }
            uiView.addSubview(player.view)
            player.view.frame = uiView.bounds
            player.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        }
    }
    
    static func dismantleUIView(_ uiView: UIView, coordinator: ()) {
        uiView.subviews.forEach { $0.removeFromSuperview() }
    }
}

// Player Screen with Enhanced Controls
struct PlayerScreen: View {
    let channel: Channel
    @Binding var showPlayerScreen: Bool
    @Binding var showGroupScreen: Bool
    @StateObject private var playerViewModel = PlayerViewModel()
    @EnvironmentObject var linkManager: ChannelLinkManager
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color.black.edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 0) {
                    if !playerViewModel.isFullscreen {
                        VStack(spacing: 10) {
                            HStack {
                                Image(channel.logo)
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 50, height: 50)
                                    .clipShape(Circle())
                                    .overlay(Circle().stroke(Color.white, lineWidth: 1))
                                
                                Text(channel.displayName)
                                    .font(.custom("Questv1-Bold", size: 20))
                                    .foregroundColor(.white)
                                
                                Spacer()
                                
                                Button(action: {
                                    playerViewModel.pause()
                                    withAnimation(.easeInOut(duration: 0.3)) {
                                        showPlayerScreen = false
                                        showGroupScreen = true
                                    }
                                }) {
                                    Image(systemName: "xmark")
                                        .font(.system(size: 20))
                                        .foregroundColor(.white)
                                        .padding(10)
                                        .background(Color.black.opacity(0.7))
                                        .clipShape(Circle())
                                }
                            }
                            .padding(.horizontal, 15)
                            .padding(.top, geometry.safeAreaInsets.top + 10)
                        }
                    }
                    
                    ZStack {
                        PlayerView(viewModel: playerViewModel)
                            .frame(width: playerViewModel.isFullscreen ? geometry.size.width : geometry.size.width,
                                   height: playerViewModel.isFullscreen ? geometry.size.height : geometry.size.height * 0.6)
                            .gesture(
                                DragGesture(minimumDistance: 0)
                                    .onChanged { _ in
                                        playerViewModel.showControlsTemporarily()
                                    }
                            )
                            .gesture(
                                TapGesture()
                                    .onEnded { _ in
                                        playerViewModel.showControlsTemporarily()
                                    }
                            )
                        
                        if playerViewModel.isLoading && !playerViewModel.isPlaying {
                            ZStack {
                                Color.black.opacity(0.8)
                                VStack(spacing: 15) {
                                    ProgressView()
                                        .progressViewStyle(CircularProgressViewStyle(tint: .white))
                                        .scaleEffect(1.5)
                                    
                                    Text(playerViewModel.errorMessage ?? "جاري التحميل...")
                                        .font(.custom("Questv1-Bold", size: 16))
                                        .foregroundColor(.white)
                                }
                            }
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                        }
                        
                        if playerViewModel.showControls {
                            ControlOverlay(viewModel: playerViewModel, geometry: geometry)
                                .transition(.opacity)
                        }
                    }
                    .frame(maxHeight: .infinity)
                }
            }
            .onAppear {
                Task {
                    await playerViewModel.load(channel: channel, linkManager: linkManager)
                }
            }
            .onDisappear {
                playerViewModel.pause()
            }
        }
        .environment(\.layoutDirection, .rightToLeft)
        .statusBar(hidden: playerViewModel.isFullscreen)
    }
}
// واجهة التحكم المدمجة المحسنة
struct ControlOverlay: View {
    @ObservedObject var viewModel: PlayerViewModel
    let geometry: GeometryProxy
    
    let speeds: [Float] = [0.5, 1.0, 1.5, 2.0]
    
    var body: some View {
        ZStack {
            Color.black.opacity(0.5)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            VStack(spacing: 20) {
                // الجزء العلوي (الجودة والسرعة)
                HStack {
                    Spacer()
                    
                    Menu {
                        ForEach(viewModel.qualityOptions, id: \.self) { quality in
                            Button(action: {
                                withAnimation(.easeInOut(duration: 0.3)) {
                                    viewModel.setQuality(quality)
                                }
                            }) {
                                Text(quality)
                            }
                        }
                    } label: {
                        HStack(spacing: 5) {
                            Image(systemName: "gearshape.fill")
                            Text(viewModel.selectedQuality)
                        }
                        .font(.system(size: 14, weight: .bold))
                        .foregroundColor(.white)
                        .padding(8)
                        .background(Color.black.opacity(0.7))
                        .cornerRadius(8)
                    }
                    
                    Menu {
                        ForEach(speeds, id: \.self) { speed in
                            Button(action: {
                                withAnimation(.easeInOut(duration: 0.3)) {
                                    viewModel.setPlaybackSpeed(speed)
                                }
                            }) {
                                Text("\(speed, specifier: "%.1f")x")
                            }
                        }
                    } label: {
                        HStack(spacing: 5) {
                            Image(systemName: "speedometer")
                            Text("\(viewModel.playbackSpeed, specifier: "%.1f")x")
                        }
                        .font(.system(size: 14, weight: .bold))
                        .foregroundColor(.white)
                        .padding(8)
                        .background(Color.black.opacity(0.7))
                        .cornerRadius(8)
                    }
                }
                .padding(.top, viewModel.isFullscreen ? geometry.safeAreaInsets.top + 10 : 10)
                .padding(.horizontal, 15)
                
                Spacer()
                
                // الأزرار الرئيسية
                HStack(spacing: 50) {
                    Button(action: {
                        withAnimation(.easeInOut(duration: 0.3)) {
                            viewModel.togglePlayPause()
                        }
                    }) {
                        Image(systemName: viewModel.isPlaying ? "pause.fill" : "play.fill")
                            .font(.system(size: 40))
                            .foregroundColor(.white)
                            .padding(15)
                            .background(Circle().fill(Color.black.opacity(0.7)))
                    }
                    .disabled(viewModel.isLocked)
                    
                    Button(action: {
                        withAnimation(.easeInOut(duration: 0.3)) {
                            viewModel.toggleFullscreen()
                        }
                    }) {
                        Image(systemName: viewModel.isFullscreen ? "arrow.down.right.and.arrow.up.left" : "arrow.up.left.and.arrow.down.right")
                            .font(.system(size: 30))
                            .foregroundColor(.white)
                            .padding(10)
                            .background(Circle().fill(Color.black.opacity(0.7)))
                    }
                    .disabled(viewModel.isLocked)
                }
                
                // زر القفل في الزاوية السفلية اليسرى
                HStack {
                    Button(action: {
                        withAnimation(.easeInOut(duration: 0.3)) {
                            viewModel.toggleLock()
                        }
                    }) {
                        Image(systemName: viewModel.isLocked ? "lock.open.fill" : "lock.fill")
                            .font(.system(size: 25))
                            .foregroundColor(.white)
                            .padding(8)
                            .background(Circle().fill(Color.black.opacity(0.7)))
                    }
                    Spacer()
                }
                .padding(.horizontal, 15)
                .padding(.bottom, viewModel.isFullscreen ? geometry.safeAreaInsets.bottom + 10 : 10)
            }
        }
    }
}

// Main View
struct MainView: View {
    @StateObject private var linkManager: ChannelLinkManager
    @State private var statusText = "اختر قناتك المفضلة"
    @State private var selectedGroup: String?
    @State private var currentTab: Tab = .home
    @State private var showPlayerScreen = false
    @State private var showGroupScreen = false
    @State private var selectedChannel: Channel?
    
    init() {
        let initialChannels: [Channel] = [
            Channel(id: "679604721", name: "beIN Sport 1 HD", displayName: "beIN Sport 1 HD", group: "القنوات الرياضية", logo: "beinSports_01_logo"),
            Channel(id: "1564627444", name: "beIN Sport 1 HD (Backup)", displayName: "beIN Sport 1 (Backup)", group: "القنوات الرياضية", logo: "beinSports_01_logo"),
            Channel(id: "1730092216", name: "beIN Sport 2 HD", displayName: "beIN Sport 2 HD", group: "القنوات الرياضية", logo: "beinSports_02_logo"),
            Channel(id: "2044537595", name: "beIN Sport 2 HD (Backup)", displayName: "beIN Sport 2 (Backup)", group: "القنوات الرياضية", logo: "beinSports_02_logo"),
            Channel(id: "2604364616", name: "beIN Sports 3 HD", displayName: "beIN Sports 3 HD", group: "القنوات الرياضية", logo: "beinSports_03_logo"),
            Channel(id: "2322261582", name: "beIN Sports 3 HD (Backup)", displayName: "beIN Sports 3 (Backup)", group: "القنوات الرياضية", logo: "beinSports_03_logo"),
            Channel(id: "1617035157", name: "beIN Sports 4 HD", displayName: "beIN Sports 4 HD", group: "القنوات الرياضية", logo: "beinSports_04_logo"),
            Channel(id: "3361859431", name: "beIN Sports 4 HD (Backup)", displayName: "beIN Sports 4 (Backup)", group: "القنوات الرياضية", logo: "beinSports_04_logo"),
            Channel(id: "2062676246", name: "AD Sport 1 HD", displayName: "AD Sport 1 HD", group: "القنوات الرياضية", logo: "AbuDhabi_Sports_1_Premium_logo"),
            Channel(id: "3992604526", name: "AD Sport 1 HD (Backup)", displayName: "AD Sport 1 (Backup)", group: "القنوات الرياضية", logo: "AbuDhabi_Sports_1_Premium_logo"),
            Channel(id: "4101961461", name: "AD Sport 2 HD", displayName: "AD Sport 2 HD", group: "القنوات الرياضية", logo: "AbuDhabi_Sports_2_Premium_logo"),
            Channel(id: "276950299", name: "SSC 1 HD", displayName: "SSC 1 HD", group: "القنوات الرياضية", logo: "SSC_Sports-1"),
            Channel(id: "1461819339", name: "SSC 2 HD", displayName: "SSC 2 HD", group: "القنوات الرياضية", logo: "SSC_Sports-2"),
            Channel(id: "4237397671", name: "Al-Jazeera", displayName: "الجزيرة", group: "القنوات الإخبارية", logo: "al-jazeera-logo"),
            Channel(id: "2950207139", name: "Al-Jazeera-Mubasher", displayName: "الجزيرة مباشر", group: "القنوات الإخبارية", logo: "aljazera_mobasher"),
            Channel(id: "3208303251", name: "Al-Arabiya", displayName: "العربية", group: "القنوات الإخبارية", logo: "Al-Arabiya_logo"),
            Channel(id: "3948955561", name: "Al-Arabiya-Al-Hadath", displayName: "العربية الحدث", group: "القنوات الإخبارية", logo: "Al-Arabiya_ALHADAT"),
            Channel(id: "2678826992", name: "Al-Jazeera-Documentary", displayName: "الجزيرة الوثائقية", group: "القنوات الوثائقية", logo: "AL-jazera-decomontry"),
            Channel(id: "3203319196", name: "National-Geographic", displayName: "ناشيونال جيوغرافيك", group: "القنوات الوثائقية", logo: "National_Geographic-Logo.wine"),
            Channel(id: "1938155815", name: "DW", displayName: "DW", group: "القنوات الوثائقية", logo: "DW_(TV)_Logo_2012"),
            Channel(id: "2776956416", name: "BeIN-Movies-2-HD", displayName: "BeIN Movies 2 HD", group: "قنوات الأفلام", logo: "MoviesHD2"),
            Channel(id: "2933030661", name: "BeIN-Fox-Movies-Family-HD", displayName: "BeIN Fox Movies Family HD", group: "قنوات الأفلام", logo: "Fox_Family_Movies_logo"),
            Channel(id: "3669198707", name: "MBC-2", displayName: "MBC 2", group: "قنوات الأفلام", logo: "MBC2_Logo"),
            Channel(id: "3272882914", name: "MBC-Action", displayName: "MBC Action", group: "قنوات الأفلام", logo: "MBC_Action_Logo"),
            Channel(id: "592733992", name: "Spacetoon", displayName: "سبيستون", group: "قنوات الكرتون", logo: "Spacetoon"),
            Channel(id: "4089718739", name: "MBC-3", displayName: "MBC 3", group: "قنوات الكرتون", logo: "MBC_3_Transparent_Background_Logo")
        ]
        _linkManager = StateObject(wrappedValue: ChannelLinkManager(channels: initialChannels))
    }
    
    let groupIcons: [String: String] = [
        "القنوات الرياضية": "Spot",
        "القنوات الإخبارية": "news",
        "القنوات الوثائقية": "Decomontry",
        "قنوات الأفلام": "Movies",
        "قنوات الكرتون": "Cartoon"
    ]
    
    var groupedChannels: [String: [Channel]] {
        Dictionary(grouping: linkManager.channels, by: { $0.group })
    }
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("background")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .clipped()
                    .edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 0) {
                    Spacer(minLength: 50)
                    
                    VStack {
                        Image("loko")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 120, height: 120)
                            .clipShape(RoundedRectangle(cornerRadius: 20))
                            .shadow(color: .black.opacity(0.3), radius: 15, x: 0, y: 10)
                            .overlay(
                                RoundedRectangle(cornerRadius: 20)
                                    .stroke(
                                        LinearGradient(
                                            gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        ),
                                        lineWidth: 2
                                    )
                            )
                            .rotation3DEffect(.degrees(5), axis: (x: 0, y: 1, z: 0))
                            .animation(.easeInOut(duration: 2).repeatForever(autoreverses: true), value: UUID())
                    }
                    .padding(.bottom, 15)
                    
                    ScrollView {
                        switch currentTab {
                        case .home:
                            HomeContent(geometry: geometry)
                        case .watch:
                            WatchContent(
                                statusText: $statusText,
                                selectedGroup: $selectedGroup,
                                groupedChannels: groupedChannels,
                                groupIcons: groupIcons,
                                showGroupScreen: $showGroupScreen,
                                playChannel: { channel in
                                    selectedChannel = channel
                                    withAnimation(.easeInOut) {
                                        showGroupScreen = false
                                        showPlayerScreen = true
                                    }
                                }
                            )
                        case .about:
                            AboutContent()
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.horizontal, geometry.safeAreaInsets.leading + 15)
                    
                    HStack(spacing: 0) {
                        TabButton(tab: .home, currentTab: $currentTab, icon: "house.fill", title: "الرئيسية")
                        TabButton(tab: .watch, currentTab: $currentTab, icon: "play.rectangle.fill", title: "العرض")
                        TabButton(tab: .about, currentTab: $currentTab, icon: "info.circle.fill", title: "حول")
                    }
                    .frame(height: 70)
                    .background(
                        LinearGradient(
                            gradient: Gradient(colors: [Color.white.opacity(0.95), Color(hex: "f5f7fa").opacity(0.95)]),
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                    .clipShape(RoundedCorner(radius: 20, corners: [.topLeft, .topRight]))
                    .shadow(color: .black.opacity(0.1), radius: 10, x: 0, y: -5)
                    .padding(.horizontal, geometry.safeAreaInsets.leading)
                    .padding(.bottom, geometry.safeAreaInsets.bottom)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color(hex: "f5f7fa").opacity(0.9))
                
                if showGroupScreen, let group = selectedGroup {
                    GroupChannelsScreen(
                        group: group,
                        channels: groupedChannels[group] ?? [],
                        groupIcon: groupIcons[group] ?? "",
                        playChannel: { channel in
                            selectedChannel = channel
                            withAnimation(.easeInOut) {
                                showGroupScreen = false
                                showPlayerScreen = true
                            }
                        },
                        showGroupScreen: $showGroupScreen,
                        showPlayerScreen: $showPlayerScreen
                    )
                    .transition(.move(edge: .trailing))
                }
                
                if showPlayerScreen, let channel = selectedChannel {
                    PlayerScreen(
                        channel: channel,
                        showPlayerScreen: $showPlayerScreen,
                        showGroupScreen: $showGroupScreen
                    )
                    .transition(.move(edge: .trailing))
                    .zIndex(1)
                }
            }
        }
        .ignoresSafeArea(.keyboard)
        .environment(\.layoutDirection, .rightToLeft)
        .environmentObject(linkManager)
    }
}

// Group Channels Screen
struct GroupChannelsScreen: View {
    let group: String
    let channels: [Channel]
    let groupIcon: String
    let playChannel: (Channel) -> Void
    @Binding var showGroupScreen: Bool
    @Binding var showPlayerScreen: Bool
    
    var regularChannels: [Channel] {
        channels.filter { !$0.displayName.contains("Backup") }
    }
    
    var backupChannels: [Channel] {
        channels.filter { $0.displayName.contains("Backup") }
    }
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color(hex: "f8fafc")
                    .edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 30) {
                    VStack(spacing: 16) {
                        HStack(spacing: 15) {
                            Image(groupIcon)
                                .resizable()
                                .scaledToFit()
                                .frame(width: 80, height: 80)
                                .clipShape(Circle())
                                .overlay(Circle().stroke(Color(hex: "00b4db"), lineWidth: 2))
                                .shadow(radius: 5)
                            
                            Text(group)
                                .font(.custom("Questv1-Bold", size: 32))
                                .foregroundColor(.black)
                                .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                            
                            Spacer()
                        }
                        Rectangle()
                            .fill(
                                LinearGradient(
                                    gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                                    startPoint: .leading,
                                    endPoint: .trailing
                                )
                            )
                            .frame(width: 96, height: 4)
                            .clipShape(RoundedRectangle(cornerRadius: 999))
                    }
                    .padding(.top, geometry.safeAreaInsets.top + 20)
                    .padding(.horizontal, 20)
                    
                    ScrollView {
                        LazyVGrid(columns: [
                            GridItem(.flexible(), spacing: 16),
                            GridItem(.flexible(), spacing: 16)
                        ], spacing: 16) {
                            ForEach(regularChannels) { channel in
                                ChannelCard(channel: channel) {
                                    playChannel(channel)
                                }
                            }
                        }
                        .padding(.horizontal, 20)
                        
                        if !backupChannels.isEmpty {
                            VStack(spacing: 16) {
                                Text("الباقة الاحتياطية")
                                    .font(.custom("Questv1-Bold", size: 24))
                                    .foregroundColor(.black)
                                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                                
                                LazyVGrid(columns: [
                                    GridItem(.flexible(), spacing: 16),
                                    GridItem(.flexible(), spacing: 16)
                                ], spacing: 16) {
                                    ForEach(backupChannels) { channel in
                                        ChannelCard(channel: channel) {
                                            playChannel(channel)
                                        }
                                    }
                                }
                            }
                            .padding(.top, 20)
                            .padding(.horizontal, 20)
                        }
                    }
                    
                    Button(action: {
                        withAnimation(.easeInOut(duration: 0.5)) {
                            showGroupScreen = false
                        }
                    }) {
                        Text("العودة")
                            .font(.custom("Questv1-Bold", size: 20))
                            .foregroundColor(.white)
                            .padding(.vertical, 12)
                            .frame(maxWidth: .infinity)
                            .background(LinearGradient(
                                gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                                startPoint: .leading,
                                endPoint: .trailing
                            ))
                            .cornerRadius(12)
                            .shadow(color: .black.opacity(0.2), radius: 5, x: 0, y: 2)
                    }
                    .padding(.horizontal, 20)
                    .padding(.bottom, 20)
                }
                .background(Color.white.opacity(0.9))
                .clipShape(RoundedRectangle(cornerRadius: 20))
            }
        }
        .environment(\.layoutDirection, .rightToLeft)
    }
}

// Watch Content
struct WatchContent: View {
    @Binding var statusText: String
    @Binding var selectedGroup: String?
    let groupedChannels: [String: [Channel]]
    let groupIcons: [String: String]
    @Binding var showGroupScreen: Bool
    let playChannel: (Channel) -> Void
    
    var body: some View {
        ScrollView {
            VStack(spacing: 40) {
                VStack(spacing: 16) {
                    Text("اختر مجموعتك المفضلة")
                        .font(.custom("Questv1-Bold", size: 32))
                        .foregroundColor(.black)
                        .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                        .multilineTextAlignment(.center)
                    
                    Rectangle()
                        .fill(
                            LinearGradient(
                                gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                        .frame(width: 120, height: 4)
                        .clipShape(RoundedRectangle(cornerRadius: 999))
                }
                .padding(.top, 20)
                
                GroupSection(
                    title: "القنوات الرياضية",
                    groups: ["القنوات الرياضية"],
                    groupIcons: groupIcons,
                    onTap: { group in
                        withAnimation(.easeInOut) {
                            selectedGroup = group
                            showGroupScreen = true
                        }
                    }
                )
                
                GroupSection(
                    title: "القنوات الإخبارية",
                    groups: ["القنوات الإخبارية"],
                    groupIcons: groupIcons,
                    onTap: { group in
                        withAnimation(.easeInOut) {
                            selectedGroup = group
                            showGroupScreen = true
                        }
                    }
                )
                
                GroupSection(
                    title: "القنوات الوثائقية",
                    groups: ["القنوات الوثائقية"],
                    groupIcons: groupIcons,
                    onTap: { group in
                        withAnimation(.easeInOut) {
                            selectedGroup = group
                            showGroupScreen = true
                        }
                    }
                )
                
                GroupSection(
                    title: "قنوات الأفلام",
                    groups: ["قنوات الأفلام"],
                    groupIcons: groupIcons,
                    onTap: { group in
                        withAnimation(.easeInOut) {
                            selectedGroup = group
                            showGroupScreen = true
                        }
                    }
                )
                
                GroupSection(
                    title: "قنوات الكرتون",
                    groups: ["قنوات الكرتون"],
                    groupIcons: groupIcons,
                    onTap: { group in
                        withAnimation(.easeInOut) {
                            selectedGroup = group
                            showGroupScreen = true
                        }
                    }
                )
                
                VStack(spacing: 16) {
                    AsyncImage(url: URL(string: "https://png.pngtree.com/png-clipart/20211024/original/pngtree-coming-soon-png-image_6863544.png")) { image in
                        image
                            .resizable()
                            .scaledToFit()
                    } placeholder: {
                        ProgressView()
                            .tint(.black)
                    }
                    .frame(width: 120, height: 120)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color(hex: "00b4db"), lineWidth: 2))
                    .shadow(color: .black.opacity(0.2), radius: 10, x: 0, y: 5)
                    
                    Text("المزيد من القنوات قادم قريبًا!")
                        .font(.custom("Questv1-Bold", size: 24))
                        .foregroundColor(.black)
                        .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                    
                    Text("استعد لتجربة بث مذهلة مع قنوات جديدة ستضيف الحماس والتشويق إلى يومك!")
                        .font(.custom("Questv1-Bold", size: 16))
                        .foregroundColor(.black.opacity(0.8))
                        .multilineTextAlignment(.center)
                        .lineSpacing(4)
                }
                .padding(.vertical, 30)
                .padding(.horizontal, 20)
                .background(Color.white.opacity(0.95))
                .clipShape(RoundedRectangle(cornerRadius: 20))
                .shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)
            }
            .padding(.vertical, 40)
        }
        .background(Color(hex: "f8fafc").opacity(0.9))
        .clipShape(RoundedRectangle(cornerRadius: 20))
    }
}

// Group Section
struct GroupSection: View {
    let title: String
    let groups: [String]
    let groupIcons: [String: String]
    let onTap: (String) -> Void
    
    var body: some View {
        VStack(spacing: 12) {
            VStack(spacing: 8) {
                Text(title)
                    .font(.custom("Questv1-Bold", size: 28))
                    .foregroundColor(.black)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                
                Rectangle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .frame(width: 96, height: 4)
                    .clipShape(RoundedRectangle(cornerRadius: 999))
            }
            
            LazyVGrid(columns: [
                GridItem(.flexible(), spacing: 16),
                GridItem(.flexible(), spacing: 16)
            ], spacing: 16) {
                ForEach(groups, id: \.self) { group in
                    GroupIconCard(
                        group: group,
                        icon: groupIcons[group] ?? "",
                        onTap: { onTap(group) }
                    )
                }
            }
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 20)
        .background(Color.white.opacity(0.9))
        .clipShape(RoundedRectangle(cornerRadius: 20))
        .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 2)
    }
}

// Group Icon Card
struct GroupIconCard: View {
    let group: String
    let icon: String
    let onTap: () -> Void
    
    @State private var isHovered = false
    
    var body: some View {
        Button(action: onTap) {
            VStack(spacing: 12) {
                Image(icon)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 80, height: 80)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color(hex: "00b4db"), lineWidth: 2))
                    .shadow(radius: 5)
                    .scaleEffect(isHovered ? 1.1 : 1.0)
                    .rotationEffect(.degrees(isHovered ? 5 : 0))
                
                Text(group)
                    .font(.custom("Questv1-Bold", size: 20))
                    .foregroundColor(.black)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
            }
            .padding(20)
            .background(Color.white.opacity(0.9))
            .clipShape(RoundedRectangle(cornerRadius: 16))
            .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: 2)
        }
        .scaleEffect(isHovered ? 0.98 : 1.0)
        .animation(.spring(response: 0.4, dampingFraction: 0.6), value: isHovered)
        .onHover { hovering in
            isHovered = hovering
        }
    }
}

// Home Content
struct HomeContent: View {
    let geometry: GeometryProxy
    
    let leagues: [League] = [
        League(id: "1", name: "دوري الأبطال", description: "أعلى منافسة أوروبية تجمع أفضل الأندية.", highlight: "أكثر نادٍ فاز باللقب: ريال مدريد (14 مرة)", logo: "Champions-League"),
        League(id: "2", name: "الدوري الإسباني", description: "موطن الكلاسيكو بين برشلونة وريال مدريد.", highlight: "أكثر نادٍ فاز باللقب: ريال مدريد (35 مرة)", logo: "LaLiga-Logo"),
        League(id: "3", name: "الدوري الفرنسي", description: "يضم نجوم العالم في باريس سان جيرمان ومارسيليا.", highlight: "أكثر نادٍ فاز باللقب: باريس سان جيرمان (11 مرة)", logo: "Ligue_1"),
        League(id: "4", name: "الدوري الألماني", description: "دوري يجمع بين القوة والشغف مع أندية مثل بايرن ميونخ.", highlight: "أكثر نادٍ فاز باللقب: بايرن ميونخ (32 مرة)", logo: "Logo_Bundesliga"),
        League(id: "5", name: "الدوري الإنجليزي", description: "أقوى دوري في العالم يضم أندية مثل مانشستر سيتي وليفربول.", highlight: "أكثر نادٍ فاز باللقب: مانشستر يونايتد (13 مرة)", logo: "1"),
        League(id: "6", name: "الدوري الإيطالي", description: "دوري تكتيكي يشتهر بأندية مثل يوفنتوس وميلان.", highlight: "أكثر نادٍ فاز باللقب: يوفنتوس (36 مرة)", logo: "Serie_A_logo"),
        League(id: "7", name: "الدوري الأوروبي", description: "منافسة مثيرة تضم أندية قوية من القارة.", highlight: "أكثر نادٍ فاز باللقب: إشبيلية (7 مرات)", logo: "Uefa_europa_league_logo")
    ]
    
    var body: some View {
        VStack(spacing: 40) {
            VStack(spacing: 20) {
                Text("تجربة بث فريدة من نوعها")
                    .font(.custom("Questv1-Bold", size: 16))
                    .foregroundColor(.black)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .background(Color.white.opacity(0.2))
                    .clipShape(RoundedRectangle(cornerRadius: 999))
                    .shadow(color: .black.opacity(0.2), radius: 5, x: 0, y: 2)
                
                Text("انطلق في عالم الترفيه مع\niDEB Sport 4K")
                    .font(.custom("Questv1-Bold", size: 32))
                    .foregroundColor(.black)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                    .multilineTextAlignment(.center)
                
                Text("استمتع ببث مباشر بجودة فائقة الوضوح")
                    .font(.custom("Questv1-Bold", size: 18))
                    .foregroundColor(.black)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                    .multilineTextAlignment(.center)
            }
            .padding(.vertical, 40)
            
            VStack(spacing: 24) {
                VStack(spacing: 12) {
                    Text("مجموعة متنوعة من الدوريات")
                        .font(.custom("Questv1-Bold", size: 16))
                        .foregroundColor(.black)
                        .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 6)
                        .background(
                            LinearGradient(
                                gradient: Gradient(colors: [Color(hex: "e0f7ff"), Color(hex: "ffe6e6")]),
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                        .clipShape(RoundedRectangle(cornerRadius: 999))
                    
                    Text("اكتشف وتابع الدوري المفضل لديك")
                        .font(.custom("Questv1-Bold", size: 28))
                        .foregroundColor(.black)
                        .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                    
                    Rectangle()
                        .fill(
                            LinearGradient(
                                gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                        .frame(width: 96, height: 4)
                        .clipShape(RoundedRectangle(cornerRadius: 999))
                }
                
                LazyVGrid(columns: [
                    GridItem(.flexible(), spacing: 16),
                    GridItem(.flexible(), spacing: 16)
                ], spacing: 16) {
                    ForEach(leagues) { league in
                        LeagueCard(league: league)
                    }
                }
            }
            .padding(.vertical, 40)
            .background(Color(hex: "f8fafc").opacity(0.9))
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
        .padding(.top, 20)
    }
}

// About Content
struct AboutContent: View {
    var body: some View {
        VStack(spacing: 32) {
            VStack(spacing: 16) {
                Text("ما الذي يجعل iDEB Sport Premium 4K الخيار الأمثل؟")
                    .font(.custom("Questv1-Bold", size: 28))
                    .foregroundColor(.black)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                    .multilineTextAlignment(.center)
                
                Rectangle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .frame(width: 96, height: 4)
                    .clipShape(RoundedRectangle(cornerRadius: 999))
            }
            
            LazyVGrid(columns: [
                GridItem(.flexible(), spacing: 16),
                GridItem(.flexible(), spacing: 16)
            ], spacing: 16) {
                WhyUsItem(icon: "tv.fill", title: "جودة فائقة الوضوح", description: "عش تجربة بصرية استثنائية مع جودة 4K.")
                WhyUsItem(icon: "server.rack", title: "أداء موثوق", description: "بث سلس دون تقطيع.")
                WhyUsItem(icon: "headphones", title: "دعم فني متميز", description: "فريق جاهز على مدار الساعة.")
                WhyUsItem(icon: "trophy.fill", title: "تغطية شاملة", description: "أهم الأحداث الرياضية العالمية.")
            }
        }
        .padding(.vertical, 40)
        .background(Color(hex: "f8fafc").opacity(0.9))
        .clipShape(RoundedRectangle(cornerRadius: 20))
    }
}

// Why Us Item
struct WhyUsItem: View {
    let icon: String
    let title: String
    let description: String
    
    @State private var isHovered = false
    
    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: icon)
                .font(.system(size: 40))
                .foregroundColor(Color(hex: "00b4db"))
                .scaleEffect(isHovered ? 1.1 : 1.0)
                .rotationEffect(.degrees(isHovered ? 5 : 0))
            
            Text(title)
                .font(.custom("Questv1-Bold", size: 20))
                .foregroundColor(.black)
                .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
            
            Text(description)
                .font(.custom("Questv1-Bold", size: 16))
                .foregroundColor(.black)
                .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                .multilineTextAlignment(.center)
                .lineSpacing(4)
        }
        .padding(24)
        .background(Color.white.opacity(0.9))
        .clipShape(RoundedRectangle(cornerRadius: 16))
        .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: 2)
        .scaleEffect(isHovered ? 0.98 : 1.0)
        .animation(.spring(response: 0.4, dampingFraction: 0.6), value: isHovered)
        .onHover { hovering in
            isHovered = hovering
        }
    }
}

// Tab Button
struct TabButton: View {
    let tab: Tab
    @Binding var currentTab: Tab
    let icon: String
    let title: String
    
    @State private var isHovered = false
    
    var body: some View {
        Button {
            withAnimation(.easeInOut) {
                currentTab = tab
            }
        } label: {
            VStack(spacing: 6) {
                Image(systemName: icon)
                    .font(.system(size: 22))
                    .scaleEffect(isHovered || currentTab == tab ? 1.1 : 1.0)
                Text(title)
                    .font(.custom("Questv1-Bold", size: 14))
                    .foregroundColor(currentTab == tab ? .black : .gray)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, 10)
        }
        .scaleEffect(isHovered ? 0.95 : 1.0)
        .animation(.spring(response: 0.3, dampingFraction: 0.6), value: isHovered)
        .onHover { hovering in
            isHovered = hovering
        }
    }
}

enum Tab {
    case home, watch, about
}

// League Card
struct LeagueCard: View {
    let league: League
    @State private var isHovered = false
    
    var body: some View {
        VStack(spacing: 16) {
            Image(league.logo)
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
                .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 2)
                .scaleEffect(isHovered ? 1.1 : 1.0)
                .rotationEffect(.degrees(isHovered ? 5 : 0))
            
            Text(league.name)
                .font(.custom("Questv1-Bold", size: 18))
                .foregroundColor(.black)
                .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
            
            Text(league.description)
                .font(.custom("Questv1-Bold", size: 14))
                .foregroundColor(.black)
                .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
                .multilineTextAlignment(.center)
                .lineSpacing(4)
            
            Text(league.highlight)
                .font(.custom("Questv1-Bold", size: 12))
                .foregroundColor(.black)
                .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
            
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [Color(hex: "00b4db"), Color(hex: "ff6f61")]),
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )
                .frame(height: 2)
                .frame(width: isHovered ? 80 : 0, alignment: .center)
        }
        .padding(20)
        .background(Color.white.opacity(0.95))
        .clipShape(RoundedRectangle(cornerRadius: 16))
        .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: 2)
        .scaleEffect(isHovered ? 0.98 : 1.0)
        .animation(.spring(response: 0.4, dampingFraction: 0.6), value: isHovered)
        .onHover { hovering in
            isHovered = hovering
        }
    }
}

// League structure
struct League: Identifiable {
    let id: String
    let name: String
    let description: String
    let highlight: String
    let logo: String
}

struct ChannelCard: View {
    let channel: Channel
    let onTap: () -> Void
    
    @State private var isHovered = false
    
    var body: some View {
        Button(action: onTap) {
            VStack(spacing: 10) {
                Image(channel.logo)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 80, height: 80)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color(hex: "00b4db"), lineWidth: 1))
                    .shadow(radius: 3)
                    .scaleEffect(isHovered ? 1.05 : 1.0)
                
                Text(channel.displayName)
                    .font(.custom("Questv1-Bold", size: 16))
                    .foregroundColor(.black)
                    .multilineTextAlignment(.center)
                    .shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
            }
            .padding(12)
            .background(Color.white.opacity(0.9))
            .cornerRadius(15)
            .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: 2)
        }
        .scaleEffect(isHovered ? 0.98 : 1.0)
        .animation(.spring(response: 0.4, dampingFraction: 0.6), value: isHovered)
        .onHover { hovering in
            isHovered = hovering
        }
    }
}

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (255, 0, 0, 0)
        }
        self.init(.sRGB, red: Double(r) / 255, green: Double(g) / 255, blue: Double(b) / 255, opacity: Double(a) / 255)
    }
}

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(
            roundedRect: rect,
            byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius)
        )
        return Path(path.cgPath)
    }
}

// Main Content View with Welcome Screen
struct ContentView: View {
    @State private var showWelcome = true
    
    var body: some View {
        ZStack {
            MainView()
            if showWelcome {
                WelcomeScreen(showWelcome: $showWelcome)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro Max"))
    }
}
